<template>
	<view class="input-box-all" :style="{ marginTop: marginTop, marginBottom: marginBottom,
	boxShadow:inputStyle.boxShadow,background:inputStyle.background,border:inputStyle.border}" :class="set">
		<view class="input-box align-items flex">
			<!-- 输入框左边内容 -->
			<view class="input-box-left left" v-if="leftText || leftClass" :class="leftClass" @click="leftClick">
				<text v-if="leftText">{{leftText}}</text>
			</view>
			<!-- 密码输入框类 -->
			<view class="input-box-center" v-if="type==='password'">
				<input @input="keyInput" @focus="addFocus" @blur="deteleFocus" :placeholder="placeholder" :disabled="disabled" :value="value" type="text" :maxlength="maxLength" class="input-box-center-text"
				       v-show="isShowEye" />
				<input @input="keyInput" @focus="addFocus" @blur="deteleFocus" :placeholder="placeholder" :disabled="disabled" :value="value" type="password" :password="true" :maxlength="maxLength" class="input-box-center-text"
				       v-show="!isShowEye" />
			</view>
			<!-- 非密码输入框类 -->
			<view class="input-box-center" v-else>
				<input @input="keyInput" @focus="addFocus" @blur="deteleFocus" :placeholder="placeholder" :disabled="disabled" :value="value" :type="type" :maxlength="maxLength" class="input-box-center-text" />
			</view>
			<!-- 清空输入框 -->
			<view class="input-box-clear" v-show="clearShow && value" @click="clear">
				×
			</view>
			<!-- 密码显示隐藏开关 -->
			<view class="left password-control" :class="isShowEye?'show':'hide'" v-if="type==='password'" @click="passwordClick"></view>
			<!-- 输入框右边内容 -->
			<view class="input-box-right right" v-if="rightText || rightClass" :style="{'color':'#6f95a8','font-size':'30rpx'}" @click="rightClick">
				<text v-if="rightText">{{rightText}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import inputVerification from './verification.js';
	export default {
		props: {
			//自定义传入的 class ，自定义样式
			set: {
				type: String,
				default: ''
			},
			//input 类型,默认 text
			type: {
				type: String,
				default: ''
			},
			// input字数限制
			maxLength: {
				type: String,
				default: '100'
			},
			// 组件对于上方的间距
			maTop: {
				type: String,
				default: '0'
			},
			// 组件对于下方的间距
			maBtm: {
				type: String,
				default: '0'
			},
			//输入框默认值
			inputValue: {
				type: String,
				default: ''
			},
			//是否禁用
			disabled: {
				default: false
			},
			// input placeholder 提示文字
			placeholder: {
				type: String
			},
			// input 校验
			verification: {
				type: Array,
				default: null
			},
			// input 校验提示语
			verificationTip: {
				type: Array,
				default: null
			},
			// input左边的文字
			leftText: {
				type: String,
				default: ''
			},
			// input左边自定义的样式
			leftClass: {
				type: String,
				default: ''
			},
			// input右边的文字
			rightText: {
				type: String,
				default: ''
			},
			// input右边自定义的样式
			rightClass: {
				type: String,
				default: ''
			},
			//是否显示清除按钮,默认显示
			clearShow: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				value: this.inputValue,
				marginTop: parseFloat(this.maTop) / 375 * 750 + 'rpx',
				marginBottom: parseFloat(this.maBtm) / 375 * 750 + 'rpx',
				isShowEye: false, //是否显示密码
				inputStyle: {
					border: '',
					background: 'f0f0f0',
					boxShadow: ''
				},
			};
		},
		methods: {
			/**
			 * @desc 密码显隐操作
			 */
			passwordClick() {
				this.isShowEye = !this.isShowEye;
			},
			/**
			 * @desc 左边点击事件
			 */
			leftClick() {
				//传值到父组件和父组件双向绑定
				this.$emit('leftClick', this.value);
			},
			/**
			 * @desc 右边点击事件
			 */
			rightClick() {
				//传值到父组件和父组件双向绑定
				this.$emit('rightClick', this.value);
				// 60s计时器出现
			},
			/**
			 * @desc 监听输入框的值
			 */
			keyInput(event) {
				let value = event.detail.value;
				this.value = value;
				//传值到父组件和父组件双向绑定
				this.$emit('input', this.value);
			},
			/**
			 * @desc 清楚输入框的值
			 */
			clear(flag) {
				this.value = '';
				// 双向绑定到父组件（双向绑定，不能弹出提示）
				this.$emit('input', this.value);
			},
			/**
			 * @param 获取带校验的输入框的值
			 */
			/**
			 * @name:获取输入框的值
			 * @return value || undefined
			 */
			getValue(flag) {
				if (!flag) {
					// 判断是否有校验
					if (this.verification && this.verification.length > 0) {
						for (let i = 0; i < this.verification.length; i++) {
							// 获取校验的名称
							const verificationName = this.verification[i]
							// 判断校验是否正确
							const verificationResult = inputVerification.verificationFuc({ name: verificationName, value: this.value })
							if (!verificationResult.flag) {
								// 弹出错误信息
								// 判断有没有自定义的弹出信息
								if (this.verificationTip && this.verificationTip[i]) {
									uni.showToast({
										icon: 'none',
										title: this.verificationTip[i] || '',
										// #ifdef MP-WEIXIN
										duration: 2000,
										// #endif
										// mask: true
									});
								} else {
									// 弹出方法自带的提示语
									uni.showToast({
										icon: 'none',
										title: verificationResult.tip || '',
										// #ifdef MP-WEIXIN
										duration: 2000,
										// #endif
										// mask: true
									});
								}
								this.isError(true)
								return ''
							}
							this.isError(false)

						}
					}
				}
				return this.value || '';
			}

			,
			/**
			 * input 样式处理 --- 自添加
			 * */
			addFocus() {
				if (this.inputStyle.boxShadow != '') return
				// isError 状态下
				if (this.inputStyle.border) {
					this.inputStyle.boxShadow = 'inset 4rpx 10rpx 10rpx #d4a4a4, inset -10rpx -10rpx 20rpx #FFFFFF'
					return
				}
				this.inputStyle.boxShadow = `inset 4rpx 10rpx 10rpx #babecc, inset -10rpx -10rpx 20rpx #FFFFFF`
			},
			deteleFocus() {
				if (this.inputStyle.boxShadow == '') return
				this.inputStyle.boxShadow = ''
				this.$emit('blur')
			},
			isError(value) {
				if (value && !this.inputStyle.border) {
					this.inputStyle.border = '1px solid #ffc5c5'
					this.inputStyle.background = '#ffebeb'
				}
				if (!value && this.inputStyle.border) {
					let old = this.inputStyle
					old.border = ''
					old.background = '#f0f0f0'
					this.inputStyle = Object.assign({}, this.inputStyle, old)
				}
			}
		}
	}
</script>

<style lang="scss">
	/*宽度转换vw*/
	@function vww($number) {
		@return ($number / 375)*750+rpx;
	}

	@mixin bgImgBase($bgImgUrl:'', $position:center, $repeat:no-repeat, $size:contain) {
		background-image: url($bgImgUrl);
		background-position: $position;
		background-repeat: $repeat;
		background-size: $size;
	}

	/* float */
	.right {
		float: right;
	}

	.left {
		float: left;
	}

	/* 项目在主轴上的对齐方式 */
	.align-items {
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center;
	}

	input:focus {
		outline: 0;
		padding: 0;
		margin: 0;
	}

	.flex {
		display: -webkit-box;
		display: -webkit-flexbox;
		display: -webkit-flex;
		display: flex;
	}

	view {
		box-sizing: border-box;
	}

	$offEye:'';
	$onEye:'';

	.input-box-all {

		width: 100%;
		height: vww(44);
		padding: 0 vww(20);
		border-bottom: 1px solid #F5F5F5;
		outline: none;
		border-radius: 16rpx;
		box-sizing: border-box;
		background-color: #f0f0f0;
		box-shadow: inset 2rpx 2rpx 4rpx #babecc, inset -2rpx -2rpx 4rpx #FFFFFF;
		color: #666666;
		font-size: 24rpx;
		width: 100%;
	}

	.input-box {
		width: 100%;
		height: 100%;
		font-size: vww(14);
		color: #4A4A4A;

		&-left {
			margin-right: vww(10);
		}

		&-center {
			flex: 1;
		}

		&-clear {
			margin-left: vww(5);
			font-size: vww(14);
		}

		&-right {
			margin-left: vww(5);
		}

		.password-control {
			margin-left: vww(5);
			width: vww(24);
			height: vww(14);

			&.hide {
				@include bgImgBase($bgImgUrl: $offEye);
			}

			&.show {
				@include bgImgBase($bgImgUrl: $onEye);
			}
		}
	}

	// 自添加
	.input-box-center-text {
		color: #666;
	}
</style>
